import React, { useState } from 'react'
import { Tabs } from 'antd'
import styles from './styles.module.css'
const { TabPane } = Tabs

interface TabContent {
  key: string
  title: JSX.Element
  component: React.ReactNode
}

interface DynamicTabsProps {
  tabs: TabContent[]
  onTabChange?: (key: string) => void
}

const DynamicTabs: React.FC<DynamicTabsProps> = ({
  tabs,
  onTabChange,
}) => {
  const [activeTab, setActiveTab] = useState<string | undefined>(
    tabs[0]?.key
  )

  const handleTabChange = (key: string) => {
    setActiveTab(key)
    if (onTabChange) {
      onTabChange(key)
    }
  }

  return (
    <Tabs
      className={styles.tabs}
      size="large"
      activeKey={activeTab}
      onChange={handleTabChange}>
      {tabs.map((tab) => (
        <TabPane tab={tab.title} key={tab.key}>
          {tab.key === activeTab && tab.component}
        </TabPane>
      ))}
    </Tabs>
  )
}

export default DynamicTabs
